<template>
  <div class="favorite-container">
    <!-- 左侧侧边栏 -->
    <div class="sidebar">
      <PersonalCenterSidebar />
    </div>

    <!-- 右侧功能区域 -->
    <div class="content-area">
      <!-- 功能区域 -->
      <div class="function-area">
        <el-input v-model="search" placeholder="请输入搜索关键词" style="width: 300px; margin-right: 10px;"></el-input>
        <el-button type="primary" @click="searchItems">搜索</el-button>
      </div>

      <!-- 表格区域 -->
      <el-table :data="tableData" border style="width: 100%; margin-top: 20px;" :stripe="true">
        <el-table-column
            label="商品图片"
            width="150"
            align="center"
        >
          <template #default="scope">
            <img :src="getImageUrl(scope.row.imageUrl)" alt="商品图片" style="max-width: 100%; max-height: 100px;">
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品名称"/>
        <el-table-column prop="storeName" label="店铺"/>
        <el-table-column prop="price" label="商品价格"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-popconfirm title="确定取消收藏吗?" @confirm="handleDelete(scope.row.id)">
              <template #reference>
                <el-button type="text">取消收藏</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部分页 -->
      <div v-if="showPagination" class="pagination-container">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 20]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>

      <!-- 返回按钮 -->
      <div class="back-button-container">
        <el-button type="primary" @click="goBack">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import router from "@/router"; // 引入路由实例
import PersonalCenterSidebar from "@/views/PersonalCenterSidebar.vue";

export default {
  name: 'Favorite',
  components: {PersonalCenterSidebar},
  data() {
    return {
      form: {},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      total: 10,
      pageSize: 5,
      tableData: [],
      userId: '1',
      showPagination: true // 默认显示分页栏，可以根据需要设置为 false 来隐藏
    }
  },
  methods: {
    handleDelete(id) {
      request.delete("/user/cancelCollection/" + id).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: '取消成功'
          })
        } else {
          this.$message({
            type: "error",
            message: "取消失败"
          })
        }
        this.load(); // 删除后需要重新加载表格
      })
    },

    handleSizeChange() {
      // 改变当前个数触发
      this.load(); // 重新刷新表格数据
    },
    handleCurrentChange() {
      // 改变当前页数触发
      this.load(); // 重新刷新表格数据
    },
    load() {
      request.get("/user/selectPage", {
        params: {
          userId: this.userId, // 用户id
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      })
    },
    getImageUrl(imagePath) {
      return imagePath.startsWith('http') ? imagePath : require(`@/${imagePath}`);
    },
    goBack() {
      router.go(-1);
    },
    searchItems() {
      this.load();
    }
  },
  created() {
    this.load();
  }
}
</script>

<style scoped>
/* 容器样式 */
.favorite-container {
  display: flex;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 1000px;
  margin: 0 auto;
}

/* 左侧侧边栏样式 */
.sidebar {
  width: 250px;
  margin-right: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* 右侧内容区域样式 */
.content-area {
  flex-grow: 1;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* 功能区域样式 */
.function-area {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

/* 表格样式 */
.el-table {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 20px;
}

.el-table th {
  background-color: #f0f0f0;
  color: #555;
  font-size: 16px;
  text-align: center;
}

.el-table td {
  vertical-align: middle;
  text-align: center;
}

.el-table tbody tr {
  transition: background-color 0.3s ease;
}

.el-table tbody tr:hover {
  background-color: #f5f5f5;
}

/* 分页容器样式 */
.pagination-container {
  text-align: center;
  margin: 20px 0;
}

/* 返回按钮容器样式 */
.back-button-container {
  text-align: center;
  margin-top: 20px;
}

/* 按钮样式 */
.el-button {
  margin: 0 5px;
  transition: all 0.3s;
}

.el-button:hover {
  transform: scale(1.05);
}

/* 输入框样式 */
.el-input {
  transition: border-color 0.3s;
}

.el-input:focus-within {
  border-color: #409eff;
}
</style>